<div class="person-info">
    <div class="person-info-head">
        <div class="head-left">
            <a [routerLink]="['/outer/project-type']" class="breadcrumb">
                项目
            </a>
            <i nz-icon type="right" theme="outline"></i>
            <a (click)="routeToSurvey()" class="breadcrumb">
                {{projectInfo.name}}
            </a>
            <b>
                <i nz-icon type="right" theme="outline"></i>
                人员管理
            </b>
        </div>

        <!-- 新增 -->
        <button *ngIf='showTeam' nz-button nzType="primary" style="float: right" (click)="addTeam(1)">新增班组</button>
        <button *ngIf='!showTeam' nz-button nzType="primary" style="float: right"
            (click)="addMajor($event)">新增工种</button>
    </div>
    <div class="person-info-body">
        <nz-tabset (nzSelectChange)='selectTabChange($event)'>
            <nz-tab nzTitle="班组管理">



                <div class="body">
                    <nz-table #basicTable [nzData]="banzuList" [nzShowPagination]="false" [nzScroll]="tableHeight">
                        <thead>
                            <tr>
                                <th nzWidth="15%">班组名称</th>
                                <th nzWidth="15%">管理人员</th>
                                <th nzWidth="30%">班组描述</th>
                                <th nzWidth="10%">操作</th>


                            </tr>
                        </thead>
                        <tbody class="zzj-scrollbar">
                            <tr *ngFor="let data of banzuList">

                                <td>{{ data.name }}</td>
                                <td>&nbsp;{{ data.manageName || '-' }}</td>
                                <td>&nbsp;{{ data.descr || '-' }}</td>

                                <td>
                                    
                                    <!-- 编辑班组 -->
                                    <i nz-icon type="form" theme="outline"  title="编辑" style="cursor: pointer;margin-right: 12px;"
                                        class="delete" (click)="addTeam(data)"></i>
                                    <!-- 删除班组 -->
                                    <i nz-icon type="delete" theme="outline" title="删除" style="cursor: pointer"
                                        class="delete" (click)="deleteTeamOrMajor(data,1)"></i>
                                </td>

                            </tr>
                        </tbody>
                    </nz-table>
                </div>


                <div class="pager">
                    <nz-pagination [(nzPageIndex)]="managerPageInfo.nzPageIndex"
                        [(nzPageSize)]="managerPageInfo.maxResultCount" [(nzTotal)]="managerPageInfo.nzTotal"
                        (nzPageIndexChange)="managerPageChange($event)" nzShowQuickJumper [nzShowTotal]="totalTemplate">
                    </nz-pagination>
                    <ng-template #totalTemplate let-total>
                        共{{managerPageInfo.nzTotal}}条
                    </ng-template>
                </div>
            </nz-tab>



            <nz-tab nzTitle="工种管理">
                <div class="body">
                    <nz-table #basicTable [nzData]="gongzhongList" [nzShowPagination]="false" [nzScroll]="tableHeight">
                        <thead>
                            <tr>
                                <th nzWidth="15%">工种名称</th>
                                <th nzWidth="15%">工种人数</th>
                                <th nzWidth="30%">工种描述</th>
                                <th nzWidth="10%">操作</th>


                            </tr>
                        </thead>
                        <tbody class="zzj-scrollbar">
                            <tr *ngFor="let data of gongzhongList">
                                <td>{{ data.name }}</td>
                                <td>&nbsp;&nbsp;{{ data.count }}(人)</td>
                                <td>&nbsp;&nbsp;{{ data.descr || '-' }}</td>
                                <td>&nbsp;
                                    <!-- 编辑工种 -->
                                    <i nz-icon type="form" theme="outline" title="编辑" style="cursor: pointer;margin-right: 12px;"
                                        class="delete" (click)="addMajor(data)"></i>
                                    <!-- 删除工种 -->
                                    <i nz-icon type="delete" theme="outline" title="删除" style="cursor: pointer"
                                        class="delete" (click)="deleteTeamOrMajor(data)"></i>
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                </div>
                <div class="pager">
                    <nz-pagination [(nzPageIndex)]="rosterPageInfo.nzPageIndex"
                        [(nzPageSize)]="rosterPageInfo.maxResultCount" [(nzTotal)]="rosterPageInfo.nzTotal"
                        (nzPageIndexChange)="rosterPageChange($event)" (nzPageSizeChange)="rosterPageSizeChange($event)"
                        nzShowQuickJumper [nzShowTotal]="totalTemplate">
                    </nz-pagination>
                    <ng-template #totalTemplate let-total>
                        共{{rosterPageInfo.nzTotal}}条
                    </ng-template>
                </div>
            </nz-tab>
        </nz-tabset>
    </div>
</div>

<!-- 新增编辑班组 -->

<nz-modal [(nzVisible)]="isTeamVisible" [nzTitle]="TeamTitle" [nzContent]="TeamContent" [nzFooter]="TeamFooter"
    (nzOnCancel)="isTeamVisible = !isTeamVisible" nzWidth=800 nzMaskClosable="false">
    <ng-template #TeamTitle>
        {{teamModal.name? teamModal.name :'编辑班组信息'}}
    </ng-template>

    <ng-template #TeamContent>


        <div nz-row class="modal">

            <!-- 班组名称 -->
            <div nz-row style="margin-top:20px">
                <label nz-col nzSpan="5" style="line-height: 32px;text-align: right;margin-right: 30px;">班组名称</label>
                <input maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="teamModal.name"
                    style="width: 50%; margin-right:8px;" placeholder="工种名称">
                <span style="color:red">*</span>
            </div>
            <!-- 负责人 -->
            <div nz-row style="margin-top:20px">
                <label nz-col nzSpan="5" style="line-height: 32px;text-align: right;margin-right: 30px;">负责人</label>
                <nz-select nz-col nzSpan="12" (ngModelChange)="selChange($event)" [(ngModel)]="currentLeader"
                    [compareWith]="compareFn" nzPlaceHolder="请选择人员">
                    <nz-option *ngFor="let option of banzuLeaderList" [nzLabel]="option.label" [nzValue]="option">
                    </nz-option>
                </nz-select> <span style="color:red;vertical-align: top;margin-left: 8px;">*</span>
            </div>
            <!-- 班组描述 -->
            <div nz-row style="margin-top:20px">
                <label nz-col nzSpan="5" style="line-height: 32px;text-align: right;margin-right: 30px;">班组描述</label>
                <input maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="teamModal.descr"
                    style="width: 50%; margin-right:8px;" placeholder="工种描述">
                <span style="color:red">*</span>
            </div>
        </div>

    </ng-template>

    <ng-template #TeamFooter>
        <button nz-button nzType="primary" (click)="handleTeamOk($event)">保存</button>
    </ng-template>
</nz-modal>


<!-- 新增编辑工种 -->

<nz-modal [(nzVisible)]="ismajorVisible" [nzTitle]="majorTitle" [nzContent]="majorContent" [nzFooter]="majorFooter"
    (nzOnCancel)="ismajorVisible = !ismajorVisible" nzWidth=800 nzMaskClosable="false">
    <ng-template #majorTitle>
        {{majorModal.name? majorModal.name :'编辑工种信息'}}
    </ng-template>

    <ng-template #majorContent>


        <div nz-row class="modal">


            <div nz-row style="margin-top:20px">
                <label nz-col nzSpan="5" style="line-height: 32px;text-align: right;margin-right: 30px;">工种名称</label>
                <input maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="majorModal.name"
                    style="width: 50%; margin-right:8px;" placeholder="工种名称">
                <span style="color:red">*</span>
            </div>



            <div nz-row style="margin-top:20px">
                <label nz-col nzSpan="5" style="line-height: 32px;text-align: right; margin-right: 30px;">工种描述</label>
                <input maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="majorModal.descr"
                    style="width: 50%; margin-right:8px;" placeholder="工种描述">
                <span style="color:red">*</span>
            </div>
        </div>

    </ng-template>

    <ng-template #majorFooter>
        <button nz-button nzType="primary" (click)="handleMajorOk($event)">保存</button>
    </ng-template>
</nz-modal>

<!-- 弹出框（删除） -->
<!-- <nz-modal [(nzVisible)]="isDelete" nzTitle="删除组织" nzOkText="确定" nzCancelText="取消" (nzOnOk)="delNode()"
    (nzOnCancel)="Canceldel()">

    <p style="color:red">删除后不能恢复，请谨慎操作。</p>
</nz-modal> -->